<template>
  <div class="hello text-center">
    <h1>{{ msg }}</h1>
    <li v-for="item in links" :key="item">
      <a @click="$goRoute(item.route)">{{ item.text }}</a>
    </li>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Hello",
      links: [
        {
          text: "首页",
          route: "/index"
        }
        // {
        //   text: "胡萝卜",
        //   route: "/home"
        // },
        // {
        //   text: "大白菜",
        //   route: "/page01"
        // },
        // {
        //   text: "水蜜桃",
        //   route: "/page02"
        // },
        // {
        //   text: "map",
        //   route: "/map"
        // },
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  display: inherit;
  padding: 5px 10px;
  border: 1px solid #ccc;
}
</style>
